<template>
  <div>
    <div class="commom-layout">
      <el-container>
        <el-header>
          <el-button type="primary" @click="addCat">新增项目</el-button>
          <el-button type="primary" @click="uploadFile">上传图片</el-button>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <CatList></CatList>
          </el-aside>
          <el-main>
            <ImageList></ImageList>
          </el-main>
        </el-container>
      </el-container>
      <Drawer ref="imagesDrawer" title="新增项目" size="70%"
        >法国红酒复工后即可</Drawer
      >
      <Drawer ref="uploadDrawer" title="上传图片" size="70%">
        <el-upload
          class="upload-demo"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CatList from "../ImageList/CatList.vue";
import ImageList from "../ImageList/ImageList.vue";
import Drawer from "../ImageList/Draver.vue";

const imagesDrawer = ref(null);
const uploadDrawer = ref(null);
const fn1 = () => {
  console.log("fn1");
};
const addCat = () => {
  imagesDrawer.value.open();
};
const uploadFile = () => {
  uploadDrawer.value.open();
};
</script>

<style lang="less" scoped></style>
